/* 消除无序列表默认样式 */
ul {
  list-style: none; /* 移除默认的列表样式 */
  padding: 0; /* 移除内边距 */
  margin: 0; /* 移除外边距 */
}

/* 将内容放置在导航栏右侧 */
.category-content {
  width: calc(100% - 320px); /* 设置内容区域宽度，减去导航栏宽度 */
  margin-left: 320px; /* 设置左侧边距，留出导航栏空间 */
  padding: 20px; /* 添加内边距 */
  background-color: #ffffff; /* 设置背景颜色 */
  height: 100%; /* 使内容区域高度充满视口 */
  overflow-y: auto; /* 允许垂直滚动 */
}

.content-body {
  margin: 0 auto; /* 居中内容 */
}

/* flex布局 */
.book-list {
  display: flex; /* 使用flex布局 */
  flex-wrap: wrap; /* 允许换行 */
  gap: 20px; /* 设置子元素之间的间距 */
  justify-content: flex-start; /* 从左到右排列对齐子元素 */
  padding: 20px; /* 添加内边距 */
}

.book-item {
  display: flex; /* 使用flex布局 */
  flex-direction: row; /* 水平排列书籍项 */
  width: 200px; /* 设置每个书籍项的宽度 */
  background-color: #f9f9f9; /* 设置背景颜色 */
  border: 1px solid #ddd; /* 添加边框 */
  border-radius: 8px; /* 圆角效果 */
  padding: 10px; /* 添加内边距 */
  text-align: center; /* 文本居中 */
}

img {
  width: 100px; /* 设置图片宽度 */
  height: 150px; /* 设置图片高度 */
  object-fit: cover; /* 保持图片比例 */
  border-radius: 4px; /* 圆角效果 */
}

.book-info {
  height: 150px; /* 设置书籍信息区域高度 */
  display: flex; /* 使用flex布局 */
  flex-direction: column; /* 垂直排列书籍信息 */
  justify-content: center; /* 垂直居中对齐 */
  margin-left: 30px; /* 设置左侧间距 */
  gap: 10px; /* 设置书籍信息之间的间距 */
}

.title {
  font-weight: bold; /* 设置标题字体加粗 */
  font-size: 16px; /* 设置标题字体大小 */
}

.author {
  font-style: italic; /* 设置作者字体为斜体 */
  color: #666; /* 设置作者字体颜色 */
  font-size: 14px; /* 设置作者字体大小 */
}
